<script lang="ts" setup>
let props = defineProps(['menuList', 'parentPath']);
</script>
<template>
    <template v-for="(item) in menuList" :key="item.path">
        <template v-if="!item.meta.hidden">
            <!-- 没有子路由 -->
            <el-menu-item v-if="!item.children || item.children.length == 1"
                :index="parentPath ? parentPath + '/' + item.path : item.path">
                <template #title>
                    <el-icon>
                        <component :is="item.meta.icon"></component>
                    </el-icon>
                    <span>{{ item.meta.title }}</span>
                </template>
            </el-menu-item>
            <!-- 折叠菜单 -->
            <el-sub-menu :index="parentPath ? parentPath + '/' + item.path : item.path"
                v-if="item.children && item.children.length > 1">
                <template #title>
                    <el-icon>
                        <component :is="item.meta.icon"></component>
                    </el-icon>
                    <span>{{ item.meta.title }}</span>
                </template>
                <!-- 递归调用 -->
                <TheMenu :menuList="item.children" :parentPath="parentPath ? parentPath + '/' + item.path : item.path">
                </TheMenu>
            </el-sub-menu>
        </template>
    </template>
</template>

<style scoped></style>
